<template>
  <div>
    <el-button type="success" plain @click="istwo">诗词填空</el-button>
    <el-button type="success" plain @click="ispoetryTitle=1">猜诗名</el-button>
    <el-button type="success" plain @click="isthree">猜诗人</el-button>
    <div class="byneirong" v-if="ispoetryTitle===1">
      <h1>
        <span class="isBypoetryTitle">游戏类型:</span> 根据古诗词内容写出诗词名
      </h1>
      <p class="poetryTitle_tishi">
        <i class="el-icon-warning-outline"></i>
        <span class="wenxingtishi">温馨提示:</span>
        当您不能准确的写出诗歌名时可以将鼠标移至下方的钥匙图标求助哦!
      </p>
      <div class="poetryList_li">
        <!-- <span class="poetryDynasty">{{onePoetry.poetryDynasty}}</span> · -->
        <!-- <span class="poetryPote">{{onePoetry.poetryPote}}</span> -->
        <div v-for="(cnt,index) in onePoetry.poetryContnent" :key="index+'poetry'">
          <p class="poetryContnent">{{cnt}}</p>
        </div>
        <el-tooltip class="item" effect="dark" placement="bottom-start">
          <div slot="content">
            <p>本诗出自于{{onePoetry.poetryDynasty}}代,由{{onePoetry.poetryPote}}所作!</p>
          </div>
          <el-button type="warning" circle icon="el-icon-key" mini></el-button>
        </el-tooltip>

        <div>
          <el-input v-model="input" minlength="10" style="width:20rem" placeholder="请输入诗词标题"></el-input>
          <el-button type="primary" @click="nextAndYN">确定</el-button>

          <el-button type="primary" @click="getOnePoetry">下一题</el-button>
        </div>
        <!-- <h1 class="poetryTitle">{{onePoetry.poetryTitle}}</h1> -->
      </div>
    </div>
    <div class="byneirong" v-if="ispoetryTitle===2">
      <h1>
        <span class="isBypoetryTitle">游戏类型:</span> 根据提供的诗词内容,填写最后一句古诗词
      </h1>
      <p class="poetryTitle_tishi">
        <i class="el-icon-warning-outline"></i>
        <span class="wenxingtishi">温馨提示:</span>
        当您不能准确的写出诗句时可以将鼠标移至下方的钥匙图标求助哦!
      </p>
      <div class="poetryList_li">
        <h1 class="poetryTitle">{{onePoetry1.poetryTitle}}</h1>
        <div
          class="poetryContnent1"
          v-for="(cnt,index) in arrPoetryContnent"
          :key="index+'poetry1'"
        >
          <p>{{cnt}}</p>
        </div>
        <div class="poetryContnent_null"></div>
        <el-tooltip class="item" effect="dark" placement="bottom-start">
          <div slot="content">
            <p>本诗出自于{{onePoetry1.poetryDynasty}}代,由{{onePoetry1.poetryPote}}所作!</p>
          </div>
          <el-button type="warning" circle icon="el-icon-key" mini></el-button>
        </el-tooltip>

        <div>
          <el-input v-model="input1" minlength="10" style="width:20rem" placeholder="请输入最后一句诗词"></el-input>
          <el-button type="primary" @click="nextAndYN1">确定</el-button>
          <el-button type="primary" @click="getOnePoetry1">下一题</el-button>
        </div>
      </div>
    </div>
    <div class="byneirong" v-if="ispoetryTitle===3">
      <h1>
        <span class="isBypoetryTitle">游戏类型:</span> 根据提供的诗词内容,写出相应诗人
      </h1>
      <p class="poetryTitle_tishi">
        <i class="el-icon-warning-outline"></i>
        <span class="wenxingtishi">温馨提示:</span>
        当您不能准确的写出诗人时可以将鼠标移至下方的钥匙图标求助哦!
      </p>
      <div class="poetryList_li">
        <h1 class="poetryTitle">{{onePoetry2.poetryTitle}}</h1>
        <!-- <span class="poetryDynasty">{{onePoetry.poetryDynasty}}</span> ·
        <span class="poetryPote">{{onePoetry.poetryPote}}</span>-->
        <div v-for="(cnt,index) in onePoetry2.poetryContnent" :key="index+'poetry2'">
          <p class="poetryContnent">{{cnt}}</p>
        </div>
        <el-tooltip class="item" effect="dark" placement="bottom-start">
          <div slot="content">
            <p>本诗出自于{{onePoetry2.poetryDynasty}}代</p>
          </div>
          <el-button type="warning" circle icon="el-icon-key" mini></el-button>
        </el-tooltip>

        <div>
          <el-input v-model="input2" minlength="10" style="width:20rem" placeholder="请输入诗人名称"></el-input>
          <el-button type="primary" @click="nextAndYN2">确定</el-button>
          <el-button type="primary" @click="getOnePoetry2">下一题</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userStudy",
  data() {
    return {
      allPoetry: [],
      onePoetry: {}, //(诗词名)
      onePoetry1: {}, //(诗词最后一句)
      onePoetry2: {}, //(诗人)
      randomNumber: 0, //当前抽中的诗歌下标(诗词名)
      randomNumber1: 0, //当前抽中的诗歌下标(诗词最后一句)
      randomNumber2: 0, //当前抽中的诗歌下标(诗人)
      index: 0,
      index1: 0,
      index2: 0,
      input: "", //(诗词名)
      input1: "", //(诗词最后一句)
      input2: "", //(诗人)
      indexarr: [],
      indexarr1: [],
      indexarr2: [],
      ispoetryTitle: 1,
      lastpoetryContnent: "",
      arrPoetryContnent: [] //pop之后的内容数组(诗词最后一句)
    };
  },
  methods: {
    //获取随机数
    getRandom(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    },
    //去除空格
    removeAllSpace(str) {
      return str.replace(/\s+/g, "");
    },
    //点击诗词填空
    istwo() {
      this.ispoetryTitle = 2;
      this.getOnePoetry1();
    },
    //点击猜诗人
    isthree() {
      this.ispoetryTitle = 3;
      this.getOnePoetry2();
    },
    //随机抽取一句诗歌(诗词最后一句)
    getOnePoetry2() {
      this.randomNumber2 = this.getRandom(0, this.allPoetry.length);
      //判断是否还有诗歌
      if (this.index2 < this.allPoetry.length - 1) {
        //还有诗歌就查询数组,确认诗歌是否回答过
        if (this.indexarr2.includes(this.randomNumber2)) {
          this.getOnePoetry2();
        } else {
          this.onePoetry2 = this.allPoetry[this.randomNumber2];
          console.log(this.onePoetry2.poetryPote);
        }
      } else {
        alert("恭喜您本回合所有诗歌已经回答正确");
      }
    },
    //点击按钮,提交诗词名,并判断是否正确(诗词最后一句)
    nextAndYN2() {
      if (this.input2) {
        let input2 = this.removeAllSpace(this.input2);
        // console.log(this.onePoetry2.poetryPote);
        if (input2 === this.onePoetry2.poetryPote) {
          this.index2++;
          //回答正确,将下标存入数组
          this.indexarr2.unshift(this.randomNumber2);
          this.$message({
            message: "恭喜您,回答正确",
            type: "success"
          });
          this.getOnePoetry2();
          this.input2 = "";
        } else {
          this.$message({
            showClose: true,
            message: "对不起,您的答案与标准答案有出入,诗句后面可以不用加。号呦",
            type: "error"
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: "输入为空?",
          type: "error"
        });
      }
    },
    //随机抽取一句诗歌(诗词最后一句)
    getOnePoetry1() {
      this.randomNumber1 = this.getRandom(0, this.allPoetry.length);
      //判断是否还有诗歌
      if (this.index1 < this.allPoetry.length - 1) {
        //还有诗歌就查询数组,确认诗歌是否回答过
        if (this.indexarr1.includes(this.randomNumber1)) {
          this.getOnePoetry1();
        } else {
          this.onePoetry1 = this.allPoetry[this.randomNumber1];
          let arrPoetryContnent = this.onePoetry1.poetryContnent.concat();
          arrPoetryContnent.pop();
          this.lastpoetryContnent = arrPoetryContnent.pop();
          this.arrPoetryContnent = arrPoetryContnent;
          console.log(this.lastpoetryContnent);
        }
      } else {
        alert("恭喜您本回合所有诗歌已经回答正确");
      }
    },
    //点击按钮,提交诗词名,并判断是否正确(诗词最后一句)
    nextAndYN1() {
      if (this.input1) {
        let input1 = this.removeAllSpace(this.input1);
        let lastpoetryContnent = this.removeAllSpace(this.lastpoetryContnent);
        console.log(input1, lastpoetryContnent);
        if (input1 === lastpoetryContnent) {
          this.index1++;
          //回答正确,将下标存入数组
          this.indexarr1.unshift(this.randomNumber1);
          this.$message({
            message: "恭喜您,回答正确",
            type: "success"
          });
          this.getOnePoetry1();
          this.input1 = "";
        } else {
          this.$message({
            showClose: true,
            message: "对不起,您的答案与标准答案有出入,诗句后面可以不用加。号呦",
            type: "error"
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: "输入为空?",
          type: "error"
        });
      }
    },
    //随机抽取一句诗歌(诗词名)
    getOnePoetry() {
      this.randomNumber = this.getRandom(0, this.allPoetry.length);
      //判断是否还有诗歌
      if (this.index < this.allPoetry.length - 1) {
        //还有诗歌就查询数组,确认诗歌是否回答过
        if (this.indexarr.includes(this.randomNumber)) {
          this.getOnePoetry();
        } else {
          this.onePoetry = this.allPoetry[this.randomNumber];
          console.log(this.onePoetry.poetryTitle);
        }
      } else {
        alert("恭喜您本回合所有诗歌已经回答正确");
      }
    },
    //点击按钮,提交诗词名,并判断是否正确(诗词名)
    nextAndYN() {
      if (this.input == this.onePoetry.poetryTitle) {
        this.index++;
        //回答正确,将下标存入数组
        this.indexarr.unshift(this.randomNumber);
        this.$message({
          message: "恭喜您,回答正确",
          type: "success"
        });
        this.getOnePoetry();
        this.input = "";
      } else {
        this.$message({
          showClose: true,
          message:
            "对不起,您的答案与标准答案有出入,您可以检查一下您在词牌名中是否加有·号",
          type: "error"
        });
      }
    }
  },
  mounted() {
    this.$store.dispatch("getAllPoetryList").then(res => {
      if (res.ok === 1) {
        this.allPoetry = res.data;
        this.getOnePoetry();
      }
    });
  }
};
</script>

<style scoped lang="scss">
.byneirong {
  margin: 0 auto;
  margin-top: 1.5rem;

  .isBypoetryTitle {
    color: rgb(255, 0, 157);
  }
  .poetryTitle_tishi {
    margin: 1rem;
    color: rgb(0, 162, 255);
    .el-icon-warning-outline {
      color: rgb(255, 217, 0);
    }
    .wenxingtishi {
      color: rgb(255, 38, 0);
    }
  }
  .poetryList_li {
    // margin: 0 auto;
    list-style: none;
    text-align: center;
    margin-bottom: 3rem;
    line-height: 1.5rem;
    .poetryTitle {
      font-style: normal;
    }
    .poetryContnent1:nth-last-child(1) {
      display: none;
    }
    .poetryContnent_null {
      width: 16rem;
      height: 1.5rem;
      background: rgba(184, 228, 119, 0.2);
      border: 1px solid rgba(3, 255, 129, 0.5);
      margin: 0 auto;
    }
    .poetryDynasty {
      font-size: 0.7rem;
    }
    .poetryPote {
      font-size: 0.8rem;
    }
  }
}
</style>